<template>
  <div class="app-container">
    <div class="app-title">
      <span>财政审核</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i
            :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']"
            @click="toggerTree"
          />
        </el-col>
        <div class="tap-fillet wqt">
          <el-radio-group
            v-model="activeName"
            style="margin-left:4rem; width:700px; height:15px; margin-top:-57px "
          >
            <el-radio-button
              label="0"
              name="noreport"
            ><img style=" height:12px;" :src="Untreatedimg">未审核</el-radio-button>
            <el-radio-button
              label="1"
              name="isreport"
            ><img style=" height:12px;" :src="Processedimg">已审核</el-radio-button>
            <el-radio-button
              v-show="!this.param5.includes('finalAudit')"
              label="-1"
              name="backreport"
            ><img style=" height:12px;" :src="Untreatedimg1">被退回</el-radio-button>
            <el-radio-button
              label="all"
              name="didNotReport"
            ><img style="height:12px;" :src="allimgSrc">全部</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <el-col
          style="text-align:right;margin-top: -3px;"
          :span="16"
        >
        
          <el-button
            v-if="activeName === '0'| activeName === '-1'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="Pass"
          >
            审核通过
          </el-button>
          <el-button
            v-if="activeName === '0' | activeName === '-1'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="Reject"
          >
            退回
          </el-button>
          <el-button
            v-if="activeName === '1'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            :loading="revokeLoading"
            @click="Revoke"
          >
            撤销审核
          </el-button>
          <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="processnode"
          >
            审核日志
          </el-button>
        </el-col>
      </div>
    </el-row>
    <div
      ref="box"
      class="box"
    >
      <div
        class="left"
        :class="[isActive ? 'wid':'wids']"
      >
        <div
          :class="[treeShow ? 'treeShow' : 'treeNotShow']"
          :style="{'height' : treeHeight + 'px'}"
        >
          <AgencyTree
            class="agencyTree"
            @handleTreeQuery="handleTreeQuery"
          />
        </div>
      </div>
      <div
        v-show="Show"
        class="resize"
        title="收缩侧边栏"
      />
      <div
        class="mid"
        :class="[isActive ? 'mids': 'min']"
      >
        <financialAuditChildren
          :key="timer"
          ref="chil"
          :tab-pane="activeName"
          :tree-data="treeData"
          @revokeCallback="revokeCallback"
        />
      </div>
      <Drag ref="icon" />

    </div>
  </div>

</template>

<script>
import financialAuditChildren from '@/views/thirteen/children/financialAuditChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
export default {
  name: 'thirteenFinancialAudit',
  components: { financialAuditChildren, AgencyTree, Drag },
  data() {
    return {
      changeAgency: '',
      treeHeight: null,
      Show: false,
      isActive: true,
      treeShow: false,
      treeData: '',
      revokeLoading: false,
      timer: '',
      param5: this.$router.currentRoute.meta.pageUrl,
      isback: this.$route.params.isback,
      activeName: '0',
      allimgSrc: require('@/assets/images/all.png'),
      Untreatedimg: require('@/assets/images/select.png'),
      Untreatedimg1: require('@/assets/images/blueselect.png'),
      Untreatedimg2: require('@/assets/images/blueselect.png'),
      Processedimg: require('@/assets/images/processed.png')
    }
  },
  watch: {
    activeName(val) {
      this.treeData = ''
      this.$refs.chil.changeTabe()
      this.timer = new Date().getTime()
      if (val === 'all') {
        this.allimgSrc = require('@/assets/images/whiteall.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg1 = require('@/assets/images/blueselect.png')
        this.Untreatedimg2 = require('@/assets/images/blueselect.png')
      } else if (val === '0') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/select.png')
        this.Untreatedimg1 = require('@/assets/images/blueselect.png')
        this.Untreatedimg2 = require('@/assets/images/blueselect.png')
      } else if (val === '-1') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg1 = require('@/assets/images/select.png')
        this.Untreatedimg2 = require('@/assets/images/blueselect.png')
      } else {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/blue.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg1 = require('@/assets/images/blueselect.png')
        this.Untreatedimg2 = require('@/assets/images/blueselect.png')
      }
    }
  },
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  created() {
    this.isbackFunc()
  },
  methods: {
    processnode() {
      this.$refs.chil.processnode()
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    // 查询
    Query() {
      this.$refs.chil.query()
    },
    Reject() {
      this.$refs.chil.auditReject()
    },
    Pass() {
      this.$refs.chil.auditPass()
    },
    Revoke() {
      this.revokeLoading = true
      this.$refs.chil.financialAuditRevoke()
    },
    revokeCallback() {
      this.revokeLoading = false
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    // 树显隐方法
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    // 树方法
    handleTreeQuery(data) {
      this.treeData = data
      this.$refs.chil.handleTree(data)
    },
    // 如果是被退回则进入被退回页签
    isbackFunc() {
      if (this.isback === 1) {
        this.activeName = '-1'
      }
    }
  }
}
</script>

